<div fxLayout="column" class="section-container">
  <div class="shape shape-style-1 shape-primary">
      <span class="circle-150"></span>
      <span class="circle-50"></span>
      <span class="circle-50"></span>
      <span class="circle-75"></span>
      <span class="circle-100"></span>
      <span class="circle-75"></span>
      <span class="circle-50"></span>
      <span class="circle-100"></span>
      <span class="circle-50"></span>
      <span class="circle-100"></span>
  </div>

  <div class="fix-width">
    <div fxLayout="row">
      <div class="home-logo"><a [routerLink]="['/']">Stbui</a></div>
      <span fxFlex></span>
      <ul class="nav">
        <li><a href="/home">首页</a></li>
        <li><a href="/home">产品</a></li>
        <li><a href="https://translator-rhinoceros-87537.netlify.com/">文档</a></li>
        <li><a href="/home">博客</a></li>
        <li><a href="/home">关于</a></li>
        <li><a href="/sigin">登录</a></li>
        <li><a href="/sigup">注册</a></li>
      </ul>
    </div>

    <div fxLayout="column" fxLayoutAlign="center center" class="content">
      <h2 class="text-white">中后台前端应用框架</h2>
      <h3 class="text-center">基于最新Angular 6框架与Material 2技术的企业级中后台前端应用框架，涵盖了大量的常用组件和基础功能，您可以快速开发各种MIS系统，如CMS、OA、CRM、ERP、POS等，最大程度上帮助企业节省时间成本和费用开支。</h3>
      <h4>
        <a mat-raised-button color="primary" class="stbui-button-lg" href="https://github.com/stbui/angular-material-app/archive/master.zip">
          <mat-icon>file_download</mat-icon>
          立即下载
        </a>
      </h4>
      <h5>当前版本：0.8.0 免费版</h5>
    </div>
  </div>
</div>

<div class="m-30">
  <div class="fix-width">
    <h2 class="text-center">功能 &amp; 特点</h2>
    <div fxLayout="row wrap" class="m-t-40">
      <div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
        <mat-icon>color_lens</mat-icon>
        <h4 class="font-500">多种颜色</h4>
        <p>提供多种配色供你选择使用，任意选择适合自己网站主题的配色进行搭配使用</p>
      </div>

      <div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
        <mat-icon>view_array</mat-icon>
        <h4 class="font-500">Dark & Light 侧边栏</h4>
        <p>包括 Dark 和 Light 侧边栏</p>
      </div>

      <div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
        <mat-icon>view_quilt</mat-icon>
        <h4 class="font-500">2000+ 页面模板</h4>
        <p>演示中进有100多个页面</p>
      </div>

      <div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
        <mat-icon>settings_input_component</mat-icon>
        <h4 class="font-500">1000+ UI 组件</h4>
        <p>提供了1000都个UI组件</p>
      </div>

      <div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
        <mat-icon>settings</mat-icon>
        <h4 class="font-500">部件</h4>
        <p>各种各样的小部件</p>
      </div>

      <div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
        <mat-icon>dashboard</mat-icon>
        <h4 class="font-500">3000+ 字体图标</h4>
        <p>图标字体都包含在这里</p>
      </div>

      <div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
        <mat-icon>screen_lock_landscape</mat-icon>
        <h4 class="font-500">响应式</h4>
        <p>所以布局全都是响应式设计</p>
      </div>

      <div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
        <mat-icon>code</mat-icon>
        <h4 class="font-500">Sass CSS</h4>
        <p>使用Sass编写CSS，很容易改变</p>
      </div>

      <div fxFlex.gt-sm="25" class="advantage-card text-center">
        <mat-icon>view_module</mat-icon>
        <h4 class="font-500">容易定制</h4>
        <p>少量调整定制属于自己的项目</p>
      </div>

      <div fxFlex.gt-sm="25" class="advantage-card text-center">
        <mat-icon>pie_chart</mat-icon>
        <h4 class="font-500">大量的图表</h4>
        <p>提供的丰富的图表类型</p>
      </div>

      <div fxFlex.gt-sm="25" class="advantage-card text-center">
        <mat-icon>verified_user</mat-icon>
        <h4 class="font-500">支持</h4>
        <p>我们提供技术支持</p>
      </div>

      <div fxFlex.gt-sm="25" class="advantage-card text-center">
        <mat-icon>cached</mat-icon>
        <h4 class="font-500">定期更新</h4>
        <p>我们不断更新我们的新功能</p>
      </div>
    </div>
    <div class="text-center m-t-40">
      <a href="https://github.com/stbui/angular-material-app" class="mat-button stbui-button stbui-button-lg stbui-button-outline">立即购买</a>
    </div>
  </div>
</div>

<div class="product-container">
  <div class="fix-width">
    <div class="product-card">
      <h2 class="text-center">旗下产品</h2>
      <div class="product-subtitle">为互联网时代的用户和企业量身打造各种高端网站，为企业提供极致服务体验。</div>
    </div>
    <div fxLayout="row wrap" fxLayoutAlign="start center">
        <div fxFlex.gt-sm="25" fxFlex.gt-xs="33.33" fxFlex="100">
          <mat-card>
            <img mat-card-image src="assets/images-demo/assets/1.png">
            <mat-card-header>
              <mat-card-title>Stbui</mat-card-title>
              <mat-card-subtitle>中后台前端应用框架</mat-card-subtitle>
            </mat-card-header>
         
            <mat-card-actions>
                <button type="button" mat-button color="primary" class="stbui-button-outline stbui-button-block" >
                    查看
                  </button>
            </mat-card-actions>
          </mat-card>
        </div>

        <div fxFlex.gt-sm="25" fxFlex.gt-xs="33.33" fxFlex="100">
          <mat-card>
            <img mat-card-image src="assets/images-demo/assets/2.png">
            <mat-card-header>
              <mat-card-title>Apm</mat-card-title>
              <mat-card-subtitle>前端数据监控系统</mat-card-subtitle>
            </mat-card-header>

            <mat-card-actions>
              <button type="button" mat-button color="primary" class="stbui-button-outline stbui-button-block" >
                查看
              </button>
            </mat-card-actions>
          </mat-card>
        </div>

        <div fxFlex.gt-sm="25" fxFlex.gt-xs="33.33" fxFlex="100">
          <mat-card>
              <img mat-card-image src="assets/images-demo/assets/3.png">
            <mat-card-header>
              <mat-card-title>Cms</mat-card-title>
              <mat-card-subtitle>内容管理系统</mat-card-subtitle>
            </mat-card-header>

            <mat-card-actions>
                <button type="button" mat-button color="primary" class="stbui-button-outline stbui-button-block" >
                    查看
                  </button>
            </mat-card-actions>
          </mat-card>
        </div>

        <div fxFlex.gt-sm="25" fxFlex.gt-xs="33.33" fxFlex="100">
          <mat-card>
            <img mat-card-image src="assets/images-demo/assets/4.png">
            <mat-card-header>
              <mat-card-title>Crm</mat-card-title>
              <mat-card-subtitle>客户关系系统</mat-card-subtitle>
            </mat-card-header>

            <mat-card-actions>
                <button type="button" mat-button color="primary" class="stbui-button-outline stbui-button-block" >
                    查看
                  </button>
            </mat-card-actions>
          </mat-card>
        </div>
      </div>
  </div>
</div>

<footer class="footer">
  <div class="fix-width">
    <div fxLayout="row" class="footer-copyright">
      <span>Copyright 2017. All Rights Reserved by stbui Pro</span>
      <span fxFlex></span>
      <span>Design & Developed by <a href="https://github.com/stbui" target="blank">stbui</a></span>
    </div>
  </div>
</footer>
